<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
            <el-form-item label="数据源" prop="channelId">
                <el-select v-model="queryParams.type" filterable placeholder="来源下游" clearable size="small">
                    <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="ID" prop="id">
                <el-input
                    v-model="queryParams.id"
                    placeholder="渠道ID"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="渠道名称" prop="name">
                <el-input
                    v-model="queryParams.name"
                    placeholder="渠道名称"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="短链token" prop="token">
                <el-input
                    v-model="queryParams.token"
                    placeholder="短链token"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-refresh"
                    size="mini"
                    @click="handleFlushesAllCaches"
                >刷新缓存
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <div style="display: ruby;">
            <el-date-picker
                v-model="todayReportDetail.date"
                type="date"
                value-format="yyyy-MM-dd"
                @change="selecReportDetailtDate"
                placeholder="选择日期">
            </el-date-picker>
            <h1>【{{todayReportDetail.date}}】今日总点击：【{{todayReportDetail.clickTotal}}】 成功点击：【{{todayReportDetail.successTotal}}】
                失败点击：【{{todayReportDetail.errorTotal}}】 回调数：【{{todayReportDetail.callbackTotal}}】</h1>
        </div>

        <el-table v-loading="loading" ref="table" :data="tableData.list">
<!--            <el-table-column type="index" label="序号" width="55" align="center"/>-->
            <el-table-column label="ID" align="center" prop="id" width="120"/>
            <el-table-column label="产品名称" align="center" prop="promote_products"/>
            <el-table-column label="渠道名称" align="center" prop="channel_name" />
            <el-table-column label="短链" align="center" prop="link_name" width="300"/>
            <el-table-column label="创建时间" align="center" prop="create_time" width="150"/>
            <el-table-column label="操作" align="center" width="280px" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleLook(scope.row)"
                    >查看
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleLookReport(scope.row)"
                    >上报详情
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)"
                    >修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-refresh"
                        @click="handleFlushesSingleCache(scope.row)"
                    >刷新缓存
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="tableData.total>0"
            :total="tableData.total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <AddOrEdit :open.sync="addOrEditMap.open"
                   :title="addOrEditMap.title"
                   :channelId="addOrEditMap.channelId"
                   :randomString="addOrEditMap.randomString"
                   :type="queryParams.type"
                   @getList="getList"
                   @handleFlushesSingleCache="handleFlushesSingleCache"
        >
        </AddOrEdit>

        <ReportDetail :open.sync="reportDetail.open"
                      :channelId="reportDetail.channelId">
        </ReportDetail>

        <el-dialog title="查看详情" :visible.sync="logDetailDialog.open" width="50%" :close-on-click-modal="false"
                   append-to-body>
            <json-viewer
                :value="logDetailDialog.jsonData"
                :expand-depth=3
                copyable
                boxed
                sort
            ></json-viewer>
        </el-dialog>
    </div>

</template>

<script>
    import {
        list,
        getTodaySReport,
        refreshCacheAll,
        refreshCacheSingle
    } from "@/api/business/juheAdmin"
    import { generateUUID } from "@/utils/index"

    import JsonViewer from 'vue-json-viewer'
    import AddOrEdit from "@/views/juheAdmin/addOrEdit.vue"
    import ReportDetail from "@/views/juheAdmin/reportDetail.vue";

    export default {
        name: "index",
        components: {
            JsonViewer,
            AddOrEdit,
            ReportDetail
        },
        data() {
            return {
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                tableData: {
                    list: [],
                    total: 0
                },
                typeList: [
                    {
                        label: "39数据库",
                        value: "39"
                    },
                    {
                        label: "182数据库",
                        value: "182"
                    }
                ],
                // 日期范围
                queryParams: {
                    type: "182",
                    id: null,
                    name: null,
                    token: null,
                    pageNum: 1,
                    pageSize: 10,
                },
                classesList: [],
                logDetailDialog: {
                    open: false,
                    jsonData: null
                },
                addOrEditMap: {
                    title: "",
                    open: false,
                    channelId: null,
                    randomString: null,
                },
                reportDetail: {
                    open: false,
                    channelId: null,
                    randomString: null,
                },
                todayReportDetail: {
                    date: "",
                    clickTotal: 0,
                    successTotal: 0,
                    errorTotal: 0,
                    callbackTotal: 0
                }
            }
        },
        created() {
            this.getList();
        },
        mounted() {
        },
        methods: {
            getList() {
                this.loading = true;
                list(this.queryParams).then(response => {
                    if(response.data){
                        this.tableData.list = response.data.data;
                        this.tableData.total = response.data.count;
                    }
                    this.getTodaySReport()
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            handleLook(row) {
                this.logDetailDialog.open = true
                this.logDetailDialog.jsonData = row;
            },
            handleLookReport(row) {
                this.reportDetail.channelId = row.id
                this.reportDetail.randomString = generateUUID(8)
                this.reportDetail.open = true
            },
            handleAdd() {
                this.addOrEditMap.title = "新增渠道"
                this.addOrEditMap.channelId = null
                this.addOrEditMap.randomString = generateUUID(8)
                this.addOrEditMap.open = true
            },
            handleEdit(row) {
                this.addOrEditMap.title = "修改渠道"
                this.addOrEditMap.channelId = row.id
                this.addOrEditMap.randomString = generateUUID(8)
                this.addOrEditMap.open = true
            },
            handleFlushesSingleCache(row) {
                refreshCacheSingle(this.queryParams.type, {
                    id: row.id
                }).then(res => {
                    this.$modal.msgSuccess("缓存刷新成功");
                })
            },
            handleFlushesAllCaches() {
                refreshCacheAll(this.queryParams.type).then(res => {
                    this.$modal.msgSuccess("缓存刷新成功");
                })
            },
            getTodaySReport(date) {
                let params = {}
                if(date) {
                    params.date = date
                }
                getTodaySReport(params).then(res=> {
                    this.todayReportDetail = res.data
                })
            },
            selecReportDetailtDate() {
                this.getTodaySReport(this.todayReportDetail.date)
            }
        }

    }
</script>

<style scoped>

</style>
